<template>
  <el-dialog
    title="详情"
    width="60%"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
    :close-on-click-modal="false"
  >
    <div>
      <el-form-item label="通知标题">{{ list?.title || "-" }}</el-form-item>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="通知类型">{{
            list?.messageType?.label || "-"
          }}</el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="接收人员">
             <VCascader
                v-model="list.receiver"
                collapse-tags
                collapse-tags-tooltip
                class="w-[100%]"
                placeholder="默认全员,可修改指定部门接受"
              />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="发布方式">{{
            list?.sendType?.label || "-"
          }}</el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="发布时间">{{
            list?.sendTime || "-"
          }}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="通知方式">{{
            list?.noticeType?.label || "-"
          }}</el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="弹窗等级">{{
            list?.popLevel?.label || "-"
          }}</el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="是否同步飞书">{{
        list?.isSyncFeishu?.label || "-"
      }}</el-form-item>
      <div>
        <strong>通知内容</strong>
        <div @click="imageChangeEdit" v-html="list?.content" class="my-[16px]"></div>
      </div>
      <div>
        <strong>附件</strong>
        <p v-for="item in list?.file || []" :key="item" class="my-[6px]">
          <span>{{ item.name }}</span>
          <span
            class="mx-[16px] text-[#3487FF] cursor-pointer"
            @click.stop="handleDown(item.url)"
            >下载</span
          >
        </p>
      </div>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
    <ImagePreview
    :isPreview="isPreview"
    :previewSrc="previewSrc"
    @update:isPreview="(val) => (isPreview = val)"
  />
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import { messageDetails } from "../../api.js";
import { downFlieMsg } from "@/api/public.js";
import ImagePreview from "@/components/imageViewer/index.vue";
const props = defineProps({
  id: { type: [Number, String], default: null },
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
});
const loading = ref(false);
const { options } = toRefs(props);
const emit = defineEmits(["update:modelValue", "refresh", "close"]);
const isEdit = computed(() => !!props.id);
watch(
  () => props.id,
  async (val) => {
    if (val) {
      getDetail();
    }
  }
);
const list = ref({});
const getDetail = async () => {
  try {
    loading.value = true;
    const { data } = await messageDetails({ id: props.id });
    list.value = data || {};
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
const handleDown = async (_url) => {
  const { data } = await downFlieMsg({
    alias: "notice-message-private",
    fileKey: _url,
  });
  if (data) window.open(data, "noopener", "noreferrer");
};
const previewSrc = ref([]);
const isPreview = ref(false);
const imageChangeEdit = (e) => {
  if (e.target.tagName == "IMG") {
    previewSrc.value = e.target.src;
    isPreview.value = true;
  }
};
const handleClose = async (refresh) => {
  list.value = {};
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
<style lang="scss" scoped>
 :deep(h1) {
    font-size: 2em;
    font-weight: 700;
  }
  :deep(h2) {
    font-size: 1.5em;
    font-weight: 700;
  }
  :deep(h3) {
    font-size: 1.17em;
    font-weight: 700;
  }
  :deep(h4) {
    font-size: 1em;
    font-weight: 700;
  }
  :deep(h5) {
    font-size: 0.83em;
    font-weight: 700;
  }
</style>